import './index.scss';
import React, { Component } from 'react';
import axios from 'axios';
import qs from 'qs';
import back from './images/back.svg'
import classNames from 'classnames';
import dsbridge from 'dsbridge';
import wxjssdk from 'libs/wxjssdk';
import share from './images/share.png'
import AppWakeup from 'components/AppWake';
import { isWechat } from 'libs/tools';
import './index.scss';


class ProductDetail extends Component {
  state = {
    list: [],
		isapp:false
  }

  componentDidMount() {
    this.init();
    let isapp = this.getIsApp();
    console.log('-=-=-=-=-=app',isapp)
		// alert(isapp)
		this.setState({
			isapp:isapp
		})
		let ua = navigator.userAgent.toLowerCase();
		if(ua.match(/MicroMessenger/i)=="micromessenger") {
			this.setState({
				isWechatEnv:true
			})
		}else{
			this.setState({
				isWechatEnv:false
			})
		}
  }

	 getIsApp = () => {
		let ua = navigator.userAgent.toLowerCase();
		console.log('ua-=-==-',ua)
		 // alert(ua)
		if (ua.match(/isapp/i) == "isapp") {
			return true;
		}
		return false;
	};

  init = () => {
		let id = qs.parse(location.href.split('?')[1]).id;
    let that = this;
    this.setState({
			productId:id
		})

		axios.get(`${APP_CONFIG.appServer}/serve/product/product/activity/collection?id=${id}`).then(res => {
      const { data} = res.data;

		  that.setState({
				list:data.modules,
				collectionName:data.collectionName
      })
      document.title  =data.collectionName;
			if(isWechat()){
				setTimeout(function() {
					wxjssdk.initShare(
						location.href,
						data.collectionName,
						'因为专业，所以放心',
						'https://jzimg.jzdoctor.com/default_head_img.png',
					);
				},800)
			}

		}).finally(res => {
		});
  }

	ProductBack = () => {
     dsbridge.call('VaccineSearchBack','hello');
	}

	gotoDetail = (productInfo) => {
  	const { isWechatEnv,collectionName } = this.state;
  	if(isWechatEnv){
		}
  	else{
			dsbridge.call('productDetail',productInfo.productId);

		}
  }

	openShare = () => {
		const {collectionName} = this.state;

		let params = {
			title: collectionName,
			img: 'https://jzimg.jzdoctor.com/default_head_img.png',
			description: '因为专业，所以放心',
			url: window.location.href
		};
		dsbridge.call('VaccineSearchWechat',JSON.stringify(params));
	}
  
  render() {
    let { list,collectionName,isWechatEnv,isapp,productId } = this.state;

    return (
      <div className={classNames("ProductDetail-wrap", { isApp: isapp })}>

				{
					isapp &&
					<div className="ProductDetail-banner">
						<span className="VaccineSearch-back" onClick={this.ProductBack}><img src={back} alt=""/></span>
						<span className="VaccineSearch-banner-title">{collectionName}</span>
					 	<span className="VaccineSearch-banner-share" onClick={this.openShare}><img src={share} alt=""/></span>

					</div>
				}

        {
					list.map((item, index) =>
						<div className="product-list" key ={index}>

							<div className={'big-img'}>
								<img src={item.advImg} alt=""/>
							</div>

							<div className={'small-img-wrap'}  style={{ backgroundColor: `rgb(${item.bgColor})` }}>
                {
                  item.productInfos.map( (productInfo, ind) =>
										<div className={'small-img'} key={ind} onClick={this.gotoDetail.bind(null, productInfo)}>
											<img src={productInfo.faceUrl} alt=""/>
											<div className={'small-img-title'}>{productInfo.name}</div>
											<div className={'small-img-price'}>
												¥{productInfo.payPrice} <span className={'discount'}> ¥{ productInfo.price} <span className={'line'}></span> </span>
                        </div>
										</div>
                   )
                }
							</div>
						</div>
          )
				}
				
				{isapp || <AppWakeup action="open_product_list" productId={productId}/>}
      </div>
    );
  }
}

export default ProductDetail;